<template>
  <div class="p-16px" v-loading="loading">
    <div>
      <el-date-picker
        @change="changeDate"
        v-model="date"
        type="daterange"
        size="large"
        :range-separator="t('common.to')"
        :start-placeholder="t('common.startDate')"
        :end-placeholder="t('common.endDate')"
        :shortcuts="shortcuts"
      />
    </div>

    <div class="datas">
      <h3>总计：</h3>
      <el-row>
        <el-col :span="8">
          <h3>{{ t('home.statics.total') }}：{{ data?.totalMoney }}</h3>
        </el-col>
        <el-col :span="8">
          <h3>{{ t('home.statics.totalReact') }}：{{ data?.totalReceivable }}</h3>
        </el-col>
        <!-- <el-col :span="8">
          <h3>{{ t('home.statics.totalReceivable') }}：{{ data?.totalCash }}</h3>
        </el-col> -->
      </el-row>

      <h3 class="p-t-20px">饮品：</h3>
      <el-row>
        <el-col :span="24">
          <h3>{{ t('home.statics.order') }}：{{ data?.drinkStatistics.orders }}</h3>
        </el-col>
        <el-col :span="12">
          <h3>{{ t('common.money') }}：{{ data?.drinkStatistics.money }}</h3>
        </el-col>
        <el-col :span="12">
          <h3>{{ t('common.receivable') }}：{{ data?.drinkStatistics.receivable }}</h3>
        </el-col>
        <el-col :span="12">
          <h3>{{ t('home.statics.paperCupL') }}：{{ data?.drinkStatistics.paperCupL }}</h3>
        </el-col>
        <el-col :span="12">
          <h3>{{ t('home.statics.paperCupM') }}：{{ data?.drinkStatistics.paperCupM }}</h3>
        </el-col>
        <el-col :span="12">
          <h3>{{ t('home.statics.plasticCupL') }}：{{ data?.drinkStatistics.plasticCupL }}</h3>
        </el-col>
        <el-col :span="12">
          <h3>{{ t('home.statics.plasticCupM') }}：{{ data?.drinkStatistics.plasticCupM }}</h3>
        </el-col>
      </el-row>

      <h3 class="p-t-20px">充值</h3>
      <el-row>
        <el-col :span="24">
          <h3>{{ t('home.statics.order') }}：{{ data?.chargeStatistics.orders }}</h3>
        </el-col>
        <el-col :span="12">
          <h3>{{ t('common.money') }}：{{ data?.chargeStatistics.money }}</h3>
        </el-col>
        <el-col :span="12">
          <h3>{{ t('common.receivable') }}：{{ data?.chargeStatistics.receivable }}</h3>
        </el-col>
      </el-row>

      <h3 class="p-t-20px">代购：</h3>
      <el-table :data="data.agentStatistics.agents">
        <el-table-column prop="id" :label="t('home.statics.source')">
          <template #default="scope">
            {{ showAgentWay(scope.row.payWay) }}
          </template>
        </el-table-column>
        <el-table-column prop="totalReact" :label="t('home.statics.money')" />
        <el-table-column prop="total" :label="t('home.statics.ls')" />
        <el-table-column prop="count" :label="t('home.statics.order')" />
      </el-table>
    </div>
  </div>
</template>

<script setup lang="ts">
const { t } = useI18n()
import dayjs from 'dayjs'
const date = ref([new Date(), new Date()])

const loading = ref(false)

const shortcuts = [
  {
    text: t('home.statics.today'),
    value: () => {
      const end = new Date()
      const start = new Date()
      return [start, end]
    }
  },
  {
    text: t('home.statics.yestoday'),
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24)
      end.setTime(end.getTime() - 3600 * 1000 * 24)
      return [start, end]
    }
  },
  {
    text: t('home.statics.week'),
    value: () => {
      let now = new Date()
      let nowDayOfWeek = now.getDay() //今天本周的第几天
      let nowDay = now.getDate() //当前日
      let nowMonth = now.getMonth() //当前月
      let nowYear = now.getFullYear() //当前年

      const start = new Date(nowYear, nowMonth, nowDay - nowDayOfWeek)
      const end = new Date(nowYear, nowMonth, nowDay + 6 - nowDayOfWeek)

      return [start, end]
    }
  }
]

const data = ref<ApiStatistics2VO>({} as ApiStatistics2VO)

onMounted(() => {
  getData()
})

function changeDate() {
  getData()
}

async function getData() {
  data.value = await apis.api.employeeOrderStatistics(
    {
      type: cache.getShop().id,
      startDate: dayjs(date.value[0]).format('YYYY-MM-DD'),
      endDate: dayjs(date.value[1]).format('YYYY-MM-DD')
    },
    loading
  )
}
</script>
<style lang="scss" scoped>
.box {
  background-color: #fff;
  border-radius: 6px;
  color: #333333;
  padding: 16px;
  text-align: center;
}
.title {
  background-color: #3aa1a2;
  color: #fff;
  border-radius: 6px 6px 0px 0px;
}
.data,
.title {
  div {
    line-height: 38px;
    text-align: center;
    width: 220px;
  }
}
h3 {
  margin: 6px 0;
}
.datas {
  width: calc(100vw - 64px);
  height: calc(100vh - 120px);
  overflow-y: scroll;
}
</style>
